<template>
  <div @click="reloade(item)" class="item">
    <div class="list_img_box">
      <img v-lazy="item.pic2" alt="">
      <div v-if="false" class="mask flex-row flex-y-center">
        <div class="flex-grow-1 flex-right">预估分佣 :</div>
        <div style="margin-left: 0.08rem" class="flex-grow-1 flex-left">
          <div class="redBg">￥{{item.estimateMoney | getCount}}</div>
        </div>
      </div>
    </div>
    <div class="couponPriceBox flex-row">
      <div class="couponPrice flex-grow-1 flex-row flex-y-center">
        <div class="coupon_bg flex-grow-0"></div>
        <div class="text flex-grow-0">￥ {{item.couponMoney | getCount}}元优惠券</div>
        <div class="coupon_bg flex-grow-0 coupon_bg2 "></div>
      </div>
      <div class="flex-grow-0 flex-y-bottom">
        <img v-if="item.goodsSrc=='tmall'" style="width: 0.25rem;" v-src="'/wxStatic/img/web/tmall.png'" alt="">
        <img v-if="item.goodsSrc=='taobao'" style="width: 0.25rem;" v-src="'/wxStatic/img/web/taobao-s@2x.png'" alt="">
      </div>
    </div>
    <p class="goods-name twoLine">
      {{item.title}}
    </p>
    <div class="item_price_box flex-row flex-y-center">
      <div class="flex-grow-1 red">
        <span>￥</span>
        {{item.price | getCount}}
      </div>
      <div class="flex-grow-1 flex-right ">
        <p class="huise" style="text-decoration:line-through">
          <span>￥</span>
          {{item.storePrice | getCount}}
        </p>
      </div>
    </div>
  </div>
</template>

<script>
  export default {
    name: "twoRowList",
    props: {
      item: {
        type: Object,
        default: {}
      }
    }
  }
</script>

<style lang="less" scoped>
  .item {
    font-size: 0.28rem;
    color: #333333;
    width: 3.25rem;
    position: relative;
    padding-bottom: 0.32rem;
    padding-top: 0.2rem;
    /*&:after {*/
    /*content: " ";*/
    /*position: absolute;*/
    /*left: 0;*/
    /*bottom: 0;*/
    /*right: 0;*/
    /*height: 1px;*/
    /*border-bottom: 1px solid #e3e3e3;*/
    /*color: #f2f2f2;*/
    /*transform-origin: 0 100%;*/
    /*transform: scaleY(0.5);*/
    /*}*/
    &:nth-child(2n-1) {
      &:after {
        content: " ";
        position: absolute;
        width: 216%;
        left: 0;
        bottom: 0;
        right: 0;
        height: 1px;
        border-bottom: 1px solid #e3e3e3;
        color: #f2f2f2;
        transform-origin: 0 100%;
        transform: scaleY(0.5);
      }
    }
    &:last-child {
      &:after {
        border: none;
      }
    }
    .couponPriceBox {
      margin: .20rem 0 .22rem;
      .couponPrice {
        height: 0.37rem;
        font-size: 0.2rem;
        color: #fff;
        text-align: right;
        .coupon_bg {
          height: 0.37rem;
          width: 0.31rem;
          background: url(../../wxStatic/img/web/coupon.png) no-repeat center center;
          background-size: 100% 100%;
        }
        .text {
          height: 0.37rem;
          background: #ff3674;
          line-height: 0.37rem;
        }
        .coupon_bg2 {
          background: url(../../wxStatic/img/web/coupon2.png) no-repeat center center;
          background-size: 100% 100%;
        }
      }
    }
    .list_img_box {
      position: relative;
      .mask {
        position: absolute;
        left: 0;
        bottom: 0;
        height: 0.42rem;
        background: rgba(0, 0, 0, 0.6);
        color: #fff;
        width: 100%;
        font-size: 0.2rem;
        .redBg {
          /*padding:0.1rem;*/
          padding: 0 0.08rem 0 0.05rem;
          border-radius: 3px;
          background: rgba(255, 54, 116, 0.7);
        }
      }
    }
    .goods-name {
      line-height: 0.32rem;
    }
    .item_price_box {
      margin-top: 0.12rem;
    }
  }


</style>